<template>
  <!-- 编辑考勤 -->
  <el-drawer
    :with-header="false"
    title="考勤"
    :visible="open"
    size="700px"
    direction="rtl"
    :before-close="drawer_handleClose"
  >
    <div style="height: 100vh" class="rela">
      <div class="drawer-title flexBet">
        <div class="t1">考勤</div>
      </div>
      <div class="drawer-content">
        <!-- 搜索项 -->
        <div class="search_courseNo">
          {{ drawerStudentRow.studentName }}({{ drawerStudentRow.studentNum }})
        </div>
        <div class="search_bar flexBet">
          <div class="inputs flex">
            <el-date-picker
              value-format="yyyy-MM-dd"
              style="width: 220px"
              class="inputstyle"
              type="date"
              v-model="queryParams.assessmentTime"
              placeholder="选择日期"
              clearable
              @change="searchDrawerList"
            >
            </el-date-picker>
          </div>
          <div class="inputs flex">
            <el-select
              class="inputstyle"
              v-model="queryParams.attendanceIds"
              placeholder="请选择节次"
              clearable
              @change="searchDrawerList"
            >
              <el-option
                v-for="(item, index) in attendanceList"
                :key="index"
                :label="item.attendanceName"
                :value="item.id"
              />
            </el-select>
          </div>
          <div class="normalBtn" style="width: 114px" @click="confirmexport">
            <svg-icon class-name="icon-img" icon-class="download_svg"/>
            <div>下载考勤</div>
          </div>
        </div>

        <div class="data_table mt16">
          <!-- 问卷列表 -->
          <el-table
            border
            v-loading="loading"
            :data="drawerList"
            height="calc(100vh - 330px)"
          >
            <el-table-column
              show-overflow-tooltip
              label="节次"
              align="center"
              prop="attendanceNames"
            >
              <template slot-scope="scope">
                {{ scope.row.assessmentTime }}
                {{
                  scope.row.attendanceNames ? scope.row.attendanceNames : '--'
                }}
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="考勤情况"
              align="center"
              prop="branchName"
            >
              <template slot-scope="scope">
                <el-dropdown>
                  <span class="el-dropdown-link">
                    <span
                      class="bottom_line"
                      v-for="(item, index) in status"
                      :key="index"
                      v-if="item.value == scope.row.status"
                    >
                      {{ item.label }}
                    </span>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      class="bottom_line"
                      v-for="(item, index) in status"
                      v-if="item.value != scope.row.status"
                      :key="index"
                      @click.native.stop="
                        statusChoose(item, scope.row, scope.$index)
                      "
                    >
                      {{ item.label }}
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="备注"
              align="center"
              prop="branchName"
              width="290"
            >
              <template slot-scope="scope">
                <el-input
                  style="width: 265px"
                  class="inputstyle"
                  v-model="scope.row.remark"
                  placeholder="请输入"
                  clearable
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <div class="search_bar flexEnd absolute" style="bottom: 56px">
        <div
          class="normalBtn w88"
          @click="drawer_handleClose()"
          style="width: 100px"
        >
          返回
        </div>
        <div
          class="primaryBtn w88"
          @click="saveDrawer('button')"
          style="margin-right: 40px; width: 100px; margin-left: 20px"
        >
          保存
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import { formatDate } from '@/utils'
import {
  attendanceStudentList,
  listattendance,
  recordAttendance
} from '@/api/tea_studentGrade/attendance'

export default {
  props: {
    open: {
      type: Boolean
    },
    drawerStudentRow: {
      type: Object,
      default: () => {
        return {}
      }
    },
    courseSchedulingId: {
      type: [Number, String]
    }
  },
  watch: {
    open(val) {
      if (val) {
        this.queryParams = {
          assessmentTime: '',
          attendanceIds: '',
          studentId: ''
        }
        console.log('获取学生数据', this.drawerStudentRow)
        this.getAttendanceList()
        this.getDrawerList()
      }
    }
  },
  data() {
    return {
      status: [
        // { value: 0, label: "正常", sort: 6 },
        // { value: 1, label: "迟到", sort: 3 },
        // { value: 2, label: "早退", sort: 4 },
        // { value: 3, label: "请假", sort: 5 },
        // { value: 4, label: "旷课", sort: 1 },
        // { value: 5, label: "迟到&早退", sort: 2 },
        { value: 0, label: '正常', sort: 6 },
        { value: 1, label: '请假', sort: 5 },
        { value: 2, label: '早退', sort: 4 },
        { value: 3, label: '迟到', sort: 3 },
        { value: 4, label: '迟到&早退', sort: 2 },
        { value: 5, label: '旷课', sort: 1 }
      ],
      queryParams: { assessmentTime: '', attendanceIds: '', studentId: '' },
      loading: false,
      drawerList: [],
      attendanceList: []
    }
  },
  methods: {
    drawer_handleClose() {
      this.$emit('update:open', false)
    },
    // 考勤状态变更
    statusChoose(statusItem, scopeRow, scopeIndex) {
      console.log(statusItem, scopeRow, scopeIndex)
      this.drawerList[scopeIndex].status = statusItem.value
      console.log(this.drawerList)
      // 局部更新
      this.$forceUpdate()
    },
    async searchDrawerList() {
      await this.saveDrawer()
      this.getDrawerList()
    },
    // 保存
    async saveDrawer(type) {
      if (this.drawerList.length == 0) {
        // 表数据为空
        if (type == 'button') {
          this.$modal.msgError('表数据为空')
        }
        return false
      }
      this.loading = true
      try {
        let res = await recordAttendance(this.drawerList)
        const { code } = res
        if (code == 200) {
          this.$emit('refresh', true)
          // 考勤成功
          if (type == 'button') {
            this.$modal.msgSuccess('考勤成功')
            this.$emit('update:open', false)
          }
        }
      } catch (error) {
        console.error(error)
      } finally {
        this.loading = false
      }
    },
    // 获取考勤节次
    async getAttendanceList() {
      try {
        let res = await listattendance({
          pageNum: 1,
          pageSize: 9999
        })
        const { code, rows } = res
        if (code == 200) {
          this.attendanceList = rows
        }
      } catch (error) {
        console.error(error)
      } finally {
        this.loading = false
      }
    },
    // 获取抽屉的学生考勤列表
    async getDrawerList() {
      this.loading = true
      try {
        this.queryParams.courseSchedulingId = this.courseSchedulingId
        this.queryParams.studentId = this.drawerStudentRow.list[0].studentId
        let res = await attendanceStudentList(this.queryParams)
        const { code, data } = res
        if (code == 200) {
          data.map((item) => {
            item.edit = true
            this.status.map((sitem) => {
              if (item.status == sitem.value) {
                item.sort = sitem.sort
              }
            })
          })
          this.drawerList = data
          // 排序
          this.drawerList.sort((a, b) => {
            return a.sort - b.sort
          })
        }
      } catch (error) {
        console.error(error)
      } finally {
        this.loading = false
      }
    },
    // 导出
    async confirmexport() {
      let obj = this.queryParams
      obj.courseSchedulingId = this.courseSchedulingId
      obj.search = ''
      this.download(
        `/school/teacher/attendance/exportAttendanceStudentInfo`,
        obj,
        `《${JSON.parse(localStorage.getItem('COURSE_INFO')).courseName}》${
          JSON.parse(localStorage.getItem('COURSE_INFO')).schedulingName
        }班-${this.drawerStudentRow.studentName} 考勤.xlsx`
      )
    }
  }
}
</script>

<style scoped lang="scss">
.bottom_line {
  color: #1684fc;
  text-decoration: underline #1684fc;
}

.red {
  color: red;
}

.search_courseNo {
  margin-bottom: 16px;
  font-family: PingFangSC, PingFang SC, sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: #333333;
  line-height: 25px;
  text-align: left;
  font-style: normal;
}

.drawer-content {
  padding: 20px 28px 0 32px;
}

.drawer-title {
  box-sizing: border-box;
  height: 70px;
  border-bottom: 1px solid #edeff0;
  padding: 0 32px;

  .t1 {
    font-family: PingFangSC, PingFang SC, sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #333333;
    line-height: 70px;
    text-align: left;
    font-style: normal;
  }

  .t2 {
    font-family: PingFangSC, PingFang SC, sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #333333;
    line-height: 70px;
    font-style: normal;
  }
}

.mt16 {
  margin-top: 16px;
}
</style>
